import Head from 'next/head';
import TableOptionsTable from '../../../components/prop-tables/TableOptionsTable';
import StateOptionsTable from '../../../components/prop-tables/StateOptionsTable';
import EnableOrderingExample from '../../../examples/enable-row-ordering';
import EnableDraggingExample from '../../../examples/enable-row-dragging';

<Head>
  <title>Row Ordering/DnD Feature Guide - Mantine React Table Docs</title>
  <meta
    name="description"
    content="How to use and customize the row drag and drop and row ordering features of Mantine React Table"
  />
</Head>

## Row Ordering (DnD) Feature Guide

Mantine React Table has exposes all the APIs necessary to enable rich row drag and drop features that you can easily build to meet your needs. This includes the ability to reorder rows, drag rows to other tables, or drag rows to other UI in your application.

> This is not the [Sorting Guide](/docs/guides/sorting) which is a different feature.

### Relevant Table Options

<TableOptionsTable
  onlyOptions={
    new Set([
      'enableRowOrdering',
      'enableRowDragging',
      'mantineRowDragHandleProps',
      'onDraggingRowChange',
      'onHoveredRowChange',
    ])
  }
/>

### Relevant State

<StateOptionsTable onlyOptions={new Set(['draggingRow', 'hoveredRow'])} />

### Enable Row Ordering

A common use for row drag and drop is to allow users to reorder rows in a table. This can be done by setting the `enableRowOrdering` table option to `true`, and then setting up an `onDragEnd` event handler on the `mantineRowDragHandleProps` table option.

```jsx
const table = useMantineReactTable({
  columns,
  data,
  enableRowOrdering: true,
  enableSorting: false, //usually you do not want to sort when re-ordering
  mantineRowDragHandleProps: {
    onDragEnd: (event, data) => {
      //data re-ordering logic here
    },
  },
});
```

<EnableOrderingExample />

### Drag and Drop Rows to Other UI or Tables

The Drag and Drop features are not limited to just internally within the same table. You can use them to drag rows to other UI in your application, or even to other tables. This can be done by setting the `enableRowDragging` table option to `true`, and then setting up an `onDragEnd` event handler on the `mantineRowDragHandleProps` table option to perform whatever logic you want to happen when a row is dropped.

<EnableDraggingExample />

View Extra Storybook **[Examples](https://www.mantine-react-table.dev/?path=/story/features-row-ordering-examples)**

> Note: Drag and Drop is not currently supported on mobile touch devices.